<template>
  <div class="attachment-container">
    <el-card class="mb20" shadow="hover">
      <h3>附件存储</h3>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="3" :lg="3" :xl="3">
          <div class="file-cate-card file-cate-image">
            <div class="icon-name">
              <el-icon>
                <ele-PictureFilled/>
              </el-icon>
              <span>图片</span>
            </div>
            <p class="used-text">{{ statistic.image.size }}&nbsp;&nbsp;已使用</p>
            <p class="used-progress">
              <el-progress :text-inside="false" color="#676bfb" :stroke-width="10" :show-text="false"
                           :percentage="statistic.image.percent"/>
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="3" :lg="3" :xl="3">
          <div class="file-cate-card file-cate-doc">
            <div class="icon-name">
              <el-icon>
                <ele-Document/>
              </el-icon>
              <span>文档</span>
            </div>
            <p class="used-text">{{ statistic.text.size }}&nbsp;&nbsp;已使用</p>
            <p class="used-progress">
              <el-progress :text-inside="false" color="#ffb366" :stroke-width="10" :show-text="false"
                           :percentage="statistic.text.percent"/>
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="3" :lg="3" :xl="3">
          <div class="file-cate-card file-cate-music">
            <div class="icon-name">
              <el-icon>
                <ele-Mic/>
              </el-icon>
              <span>音频</span>
            </div>
            <p class="used-text">{{ statistic.audio.size }}&nbsp;&nbsp;已使用</p>
            <p class="used-progress">
              <el-progress :text-inside="false" color="#d765fb" :stroke-width="10" :show-text="false"
                           :percentage="statistic.audio.percent"/>
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="3" :lg="3" :xl="3">
          <div class="file-cate-card file-cate-video">
            <div class="icon-name">
              <el-icon>
                <ele-VideoPlay/>
              </el-icon>
              <span>视频</span>
            </div>
            <p class="used-text">{{ statistic.video.size }}&nbsp;&nbsp;已使用</p>
            <p class="used-progress">
              <el-progress :text-inside="false" color="#e91e63" :stroke-width="10" :show-text="false"
                           :percentage="statistic.video.percent"/>
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="3" :lg="3" :xl="3">
          <div class="file-cate-card file-cate-install">
            <div class="icon-name">
              <el-image class="el-icon" :src="InstallIcon"/>
              <span>安装包</span>
            </div>
            <p class="used-text">{{ statistic.install.size }}&nbsp;&nbsp;已使用</p>
            <p class="used-progress">
              <el-progress :text-inside="false" color="#5ec7fb" :stroke-width="10" :show-text="false"
                           :percentage="statistic.install.percent"/>
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="3" :lg="3" :xl="3">
          <div class="file-cate-card file-cate-zip">
            <div class="icon-name">
              <el-image class="el-icon" :src="ZipIcon"/>
              <span>压缩包</span>
            </div>
            <p class="used-text">{{ statistic.zip.size }}&nbsp;&nbsp;已使用</p>
            <p class="used-progress">
              <el-progress :text-inside="false" color="#ffc757" :stroke-width="10" :show-text="false"
                           :percentage="statistic.zip.percent"/>
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="3" :lg="3" :xl="3">
          <div class="file-cate-card file-cate-other">
            <div class="icon-name">
              <el-image class="el-icon" :src="OtherIcon"/>
              <span>其他</span>
            </div>
            <p class="used-text">{{ statistic.other.size }}&nbsp;&nbsp;已使用</p>
            <p class="used-progress">
              <el-progress :text-inside="false" color="#dde1ff" :stroke-width="10" :show-text="false"
                           :percentage="statistic.other.percent"/>
            </p>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="disk-general">
            <h3>本地磁盘：34G</h3>
            <p class="cate-local-per">
              <span>图片13G</span>
              <span>文档2G</span>
              <span>音频2G</span>
              <span>视频17G</span>
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="disk-general">
            <h3>华为OBS：40G</h3>
            <p class="cate-hwobs-per">
              <span>图片13G</span>
              <span>文档2G</span>
              <span>音频2G</span>
              <span>视频17G</span>
            </p>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <h3>最近更新</h3>
          <div>
            <el-table :data="latestFiles" style="width: 100%">
              <el-table-column width="400" label="文件名">
                <template #default="scope">
                  <div class="inner-file-name">
                    <el-icon v-if="scope.row.type === 'image'" class="image-icon">
                      <ele-PictureFilled/>
                    </el-icon>
                    <el-icon v-else-if="scope.row.type === 'text'" class="text-icon">
                      <ele-Document/>
                    </el-icon>
                    <el-icon v-else-if="scope.row.type === 'audio'" class="audio-icon">
                      <ele-Mic/>
                    </el-icon>
                    <el-icon v-else-if="scope.row.type === 'video'" class="video-icon">
                      <ele-VideoPlay/>
                    </el-icon>
                    <el-icon v-else class="unknown-icon">
                      <ele-Warning/>
                    </el-icon>
                    {{ scope.row.fullName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="size" label="文件大小"/>
              <el-table-column prop="source" label="存储位置"/>
              <el-table-column prop="directory.name" label="目录"/>
              <el-table-column prop="mimeType" label="文件类型"/>
              <el-table-column prop="createdAt" label="更新时间"/>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, onBeforeMount, defineComponent, ref} from 'vue';
import Statistic from "/@/views/attachment/general/component/statistic.vue";
import {getSizeCountByType, getUploadLatest} from "/@/api/attachment";
import InstallIcon from '/@/assets/attach/install_icon.svg'
import ZipIcon from '/@/assets/attach/zip_icon.svg'
import OtherIcon from '/@/assets/attach/other_icon.svg'

export default defineComponent({
  name: 'apiV1AttachmentGeneral',
  components: {Statistic},
  setup() {
    const statisticRef = ref()
    const state = reactive({
      queryParams: {
        title: "",
        component: ""
      },
      latestFiles: [],
      statistic: {
        total: '0 M',
        image: {size: '0 M', percent: 0},
        video: {size: '0 M', percent: 0},
        audio: {size: '0 M', percent: 0},
        text: {size: '0 M', percent: 0},
        install: {size: '0 M', percent: 0},
        zip: {size: '0 M', percent: 0},
        other: {size: '0 M', percent: 0},
      },
    });
    onBeforeMount(() => {
      getSizeCountByMimeType()
      getLatest()
    });

    const getSizeCountByMimeType = () => {
      getSizeCountByType({}).then(res => {
        state.statistic = res.data
      })
    }

    const getLatest = () => {
      getUploadLatest({}).then(res => {
        state.latestFiles = res.data
      })
    }
    return {
      statisticRef,
      InstallIcon,
      ZipIcon,
      OtherIcon,
      ...toRefs(state)
    };
  },
});
</script>
<style scoped lang="scss">
.attachment-container {
  h3 {
    margin: 10px 0;
    font-size: 15px;
    color: var(--el-text-color-primary);
  }
  .disk-general{
    margin-top: 20px;
    padding: 10px;
    border-radius: 6px;
  }

  .cate-local-per,
  .cate-hwobs-per {
    color: #ffffff;
    padding: 6px 0 20px 0;

    span {
      font-size: 12px;
      text-align: center;
      display: inline-block;
      height: 20px;
      line-height: 20px;
    }

    span:nth-child(1) {
      background-color: #676bfb;
      width: 30%;
      border-radius: 10px 0 0 10px;
    }

    span:nth-child(2) {
      background-color: #ffb366;
      width: 10%;
    }

    span:nth-child(3) {
      background-color: #d765fb;
      width: 10%;
    }

    span:nth-child(4) {
      background-color: #e91e63;
      width: 50%;
      border-radius: 0 10px 10px 0;
    }
  }

  .file-cate-card {
    border-radius: 5px;
    display: block;
    width: 100%;
    height: 140px;
    padding: 20px;

    .icon-name {
      display: inline-flex;
      align-items: center;
      margin-bottom: 20px;

      .el-icon {
        padding: 10px;
        width: 40px;
        height: 40px;
        font-size: 20px;
        color: #efefef;
        border-radius: 10px;
      }

      span {
        font-weight: bold;
        font-size: 18px;
        margin-left: 15px;
      }
    }

    .used-text {
      color: grey;
      font-size: 13px;
      margin-bottom: 6px;
    }
  }

  .file-cate-image {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #676bfb;
    }
  }

  .file-cate-doc {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #ffb366;
    }
  }

  .file-cate-music {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #d765fb;
    }
  }

  .file-cate-video {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #e91e63;
    }
  }

  .file-cate-install {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #5ec7fb;
    }
  }

  .file-cate-zip {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #ffc757;
    }
  }

  .file-cate-other {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #dde1ff;
    }
  }

  .inner-file-name {
    display: inline-flex;
    align-items: center;
    font-weight: bold;

    .el-icon {
      color: #ffffff;
      padding: 3px;
      border-radius: 5px;
      font-size: 20px;
      margin-right: 10px;
    }

    .image-icon {
      background-color: rgba(103, 107, 251, 0.5);
    }

    .text-icon {
      background-color: rgba(255, 179, 102, 0.5);
    }

    .audio-icon {
      background-color: rgba(215, 101, 251, 0.5);
    }

    .video-icon {
      background-color: rgba(233, 30, 99, 0.5);
    }

    .unknown-icon {
      background-color: #efefef;
    }
  }
}
</style>
